<template>
	<div>
		<div class="login">
			<h1>欢迎登录</h1>
			<div class="form">
				<div class="item">
					<span class="iconfont icon-user"></span>
					<input type="text" placeholder="手机号码" v-model="phone" />
				</div>
				<div class="item">
					<span class="iconfont icon-user"></span>
					<input type="password" placeholder="密码" v-model="captcha" />
				</div>
				<div class="item">
					<div class="submit" @click="submit"  >提交</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// import {getCaptchaVerify} from "../../api/base"
// import { Notify } from 'vant';
export default {
	data() {
		return {
			phone: '',
			captcha: '',
		};
	},
	methods:{
		submit(){
			this.$store.commit('setLogin');
			this.$router.push('/recommend');
			this.$store.commit("listsname",{"phone":this.phone ,"password":this.captcha})
			// let reg = /^(17[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			// // let regs = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			// let patrn = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
			// if (!reg.test(this.phone) ) {
			// 	Notify({ type: 'warning', message: '请输入正确手机号码或者密码' });
			// 	return;
			// }else if(!patrn.test(this.captcha)){
			// 	Notify({ type: 'warning', message: '请输入正确手机号码或者密码' });
			// 	return;
			// }else{

			// 	getCaptchaVerify({'phone':this.phone,'password':this.captcha}).then( (data) => {
			// 		if (data.code == 200) {
			// 			Notify({ type: 'success', message: '登录成功' });
			// 			this.$router.push('/recommend');
			// 			this.$store.commit("listsname",{"phone":this.phone ,"password":this.captcha})
			// 		}
			// 	})
			// }
		}
	},
	
};
</script>

<style lang="less" scoped>
.login {
	background: #6495ED;
	width: 100%;
	height: 1000px;
	color: #fff;
	h1 {
		font-size: 48px;
		text-align: center;
		height: 48px;
		padding: 180px 0 85px 0;
		text-shadow: 10px 3px  #999;
	}
	.form {
        height: 350px;
		.item {
			width: 76%;
			height: 60px;
			line-height: 60px;
			margin: 0 auto;
			background-color: #ccc;
			border-radius: 30px;
			margin-bottom: 24px;
			border: 2px solid #fff;
			input {
				background-color: transparent;
				border: 0px;
				outline: none;
				text-indent: 0.5em;
				font-size: 25px;
				color: #fff;
			}
			span {
				font-size: 40px;
				margin-left: 10px;
				display: inline-block;
				vertical-align: middle;
				color: #000;
			}
			.submit {
				font-size: 30px;
				background-color: #fff;
				text-align: center;
				color: #d4473c;
				border-radius: 30px;
			}
		}
	}
}
</style>
